웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
hr 태그는 수평선을 보여주어 섹션 또는 단락을 구분짓기 위해서 간편하게 사용할 수가 있습니다. 디바이더로 불리기도 하죠. 이 부분을 표현하기 위해서 섹션 상단 또는 하단에 스타일을 지정하기도 하지만 hr 태그를 사용하면 알아보기가 쉽기 때문에 더 좋죠. 그럼 아래 예제를 참고하세요.
<html>
<body>
<section>A</section>
<hr class="hrcss"></hr>
<section>B</section>
</body>
</html>
Result
A
B
// 위처럼 A 섹션과 B섹션을 구분해 주는 구분선이 생기게 되었습니다.
<style>
.hrcss { border-color: red; width: 50%; }
</style>
Result
A
B
// 길이 width를 50%, 테두리 색상을 red로 설정한 결과
[ 1 ] hr 태그 예제 보기
<html>
<body>
<section>A</section>
<hr class="hrcss"></hr>
<section>B</section>
</body>
</html>
Result
// 위처럼 A 섹션과 B섹션을 구분해 주는 구분선이 생기게 되었습니다.
! 두번째 예제. 테두리에 스타일 적용하기
<style>
.hrcss { border-color: red; width: 50%; }
</style>
Result
// 길이 width를 50%, 테두리 색상을 red로 설정한 결과
아래의 글도 찾고 계시지 않나요?